﻿@page
@using Volo.Abp.AspNetCore.Mvc.UI.Layout
@model YaAppoint.Web.Pages.PrintTemplates.IndexModel
@inject IPageLayout PageLayout
@{
    PageLayout.Content.Title = "打印模板";
}
@section scripts
{
    <abp-script src="/Pages/PrintTemplates/Index.cshtml.js"></abp-script>
}

<div class="content-container">
    <div id="app">
        <div class="title-container">
            <div>
                <span>{{department?department.name:''}}.{{deviceType?deviceType.name:''}}</span>
            </div>
        </div>
        <el-row>
            <el-col :span="23">
                <div class="grid-content bg-purple-dark">
                    <el-select size="mini" v-model="filterPrintType" placeholder="选择打印类型" clearable>
                        <el-option v-for="item in printTypeOptions"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input v-model.trim="filterName" placeholder="模板名称" size="mini" style="width:300px;margin-left:10px" clearable></el-input>
                    <el-button type="primary" v-on:click="loadTableData" icon="el-icon-search" size="mini" style="margin-left:10px;">搜索</el-button>
                    <el-button v-on:click="showCreate" icon="el-icon-plus" size="mini" v-if="templateAddPermission">新建</el-button>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content bg-purple-dark">
                    <el-button v-on:click="loadTableData" icon="el-icon-refresh" size="mini"></el-button>
                </div>
            </el-col>
        </el-row>
        <hr class="line-gray" />
        <div class="container-body">
            <div class="nav-container">  
                <el-tree :data="treeData" :props="defaultProps" :expand-on-click-node="false" default-expand-all :highlight-current="true" v-on:node-click="nodeClicked" node-key="id">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <i :class="data.icon"></i>
                        <a>
                            <cite>{{node.label }}</cite>
                        </a>
                    </span>
                </el-tree>
            </div>
            <div class="table-container">
                <el-table :data="tableData" height="500" size="mini" class="el-table" row-key="key" ref="examItemTable" v-show="department && deviceType" >
                    <el-table-column type="index">

                    </el-table-column>
                    <el-table-column label="名称" width="200" property="name">

                    </el-table-column>
                    <el-table-column label="模板类型"  width="150">
                        <template slot-scope="scope">
                            <span v-if="scope.row.printType===0" style="color:#409EFF"> 预约小票</span>
                            <span v-else style="color:#F56C6C">签到小票</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="活动" align="center"  width="100">
                        
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.isActive"
                                       :key="scope.row.id"
                                       disabled>
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="顺序" align="center" property="order"  >
                    </el-table-column>
                    <el-table-column label="操作" width="300" property="type">
                        <template slot-scope="scope">
                            <el-button size="mini" icon="el-icon-edit" v-on:click="showEdit(scope.row.id)" v-if="templateEditPermission">编辑</el-button>
                            <el-button icon="fa fa-paintbrush" size="mini" v-on:click="design(scope.row.id)" v-if="templateDesignPremission">设计</el-button>
                            <el-button size="mini" icon="el-icon-delete" type="danger" v-on:click="deleteTemplate(scope.row.id)" v-if="templateDeletePermission"></el-button>
                            
                        </template>
                    </el-table-column>
                </el-table>
                <div v-show="!department" class="no-department">
                    <span>系统中还没配置任何科室！！</span>
                </div>
                <div v-show="department && !deviceType" class="no-device-type">
                    <span>还未配置科室设备类型！！</span>
                </div>
            </div>
        </div>

        <!--创建与编辑对话框-->
        <el-dialog :title="dialogTitle" width="500px" :visible.sync="dialogVisible" v-on:close="resetForm" :close-on-click-modal="false">
            <el-form :model="template" :label-width="formLabelWidth" ref="dialogForm" :rules="rules">
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="名称" prop="name">
                                <el-input v-model.trim="template.name" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="打印类型" prop="printType">
                                <el-select size="mini" style="width:100%;" v-model="template.printType" placeholder="请选择">
                                    <el-option v-for="item in printTypeOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="顺序" prop="order">
                                <el-input type="number" step="1" v-model="template.order" size="mini" autocomplete="off" clearable></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="grid-content bg-purple-dark">
                            <el-form-item label="活动">
                                <el-switch v-model="template.isActive">
                                </el-switch>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" v-on:click="save" size="mini">保存</el-button>
                <el-button v-on:click="resetForm" size="mini">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</div>